<template>
  <l-dialog
    title="数据源选择"
    width="800px"
    :height="600"
    :visible.sync="midVisible"
    :hasBtns="multiple"
    @close="closeDialog"
    @opened="handleOpened"
    @ok="okDialog"
  >
    <l-layout class="l-tab-page">
      <template #left>
        <l-panel :title="$t('分类目录')" style="padding-right: 0">
          <el-tree
            default-expand-all
            :data="dataItemTree_DatasourceType"
            @node-click="handleNodeClick"
          >
            <span class="lr-tree-node" slot-scope="{ node }">
              <i class="el-icon-notebook-2"></i>
              {{ $t(node.label) }}
            </span>
          </el-tree>
        </l-panel>
      </template>
      <l-select-panel
        style="padding: 8px; padding-left: 0"
        ref="selectPanel"
        :multiple="multiple"
        v-model="value"
        valueKey="f_Id"
        :columns="columns"
        :isPage="true"
        :loadSelectTable="loadSelectTable"
        isSaveSelectData
        @rowClick="handleRowClick"
      >
        <template v-slot:f_Code="scope">
          <el-tag v-if="scope.row.f_Type == '1'" size="mini" type="success">{{
            $t("表")
          }}</el-tag>
          <el-tag
            v-else-if="scope.row.f_Type == '2'"
            size="mini"
            type="warning"
            >{{ $t("JS") }}</el-tag
          >
          <el-tag v-else size="mini">{{ $t("SQL") }}</el-tag>

          {{ scope.row.f_Code }}
        </template>
      </l-select-panel>
    </l-layout>
  </l-dialog>
</template>

<script>
const api = window.$api.data.dbsource;
export default {
  name: "l-dbsource-selectdialog",
  props: {
    visible: {
      type: Boolean,
    },
    dbCode: String,
    multiple: {
      type: Boolean,
      default: true,
    },
    isOkClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      value: "",
      columns: [
        { label: "编码", prop: "f_Code", minWidth: "150" },
        { label: "名称", prop: "f_Name", minWidth: "150" },
        {
          label: "分类",
          prop: "f_Category",
          width: "120",
          dataType: "dataItem",
          dataCode: "datasourceType",
        },
      ],
      category: "",
    };
  },
  created() {},
  mounted() {},
  computed: {
    midVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    dataItemTree_DatasourceType() {
      return this.lr_dataItemTree(this.lr_dataItem["datasourceType"]);
    },
  },
  methods: {
    handleNodeClick(data) {
      this.category = data.value;
      this.$refs.selectPanel.init();
    },
    refreshData() {
      if (this.dbCode) {
        this.dbList[this.dbCode] = null;
      }
      this.$refs.selectPanel.init();
    },
    async loadSelectTable(postData) {
      postData.category = this.category;
      postData.sidx = "F_ModifyDate DESC";
      const res = await this.$awaitWraper(api.getPage(postData));
      return res;
    },
    closeDialog() {
      this.$refs.selectPanel.handleClear();
    },
    handleOpened() {
      this.lr_loadDataItem("datasourceType");
      this.$refs.selectPanel.init();
    },
    loadData() {
      this.$refs.selectPanel.init();
    },
    async okDialog(showLoading, hideLoading) {
      let select =  await this.$refs.selectPanel.getSelected();
      this.$emit("select", select, showLoading, hideLoading);
      if (this.isOkClose) {
        this.midVisible = false;
      }
    },
    handleRowClick({row}) {
      if (!this.multiple) {
        this.$emit("select", [row]);
        if (this.isOkClose) {
          this.midVisible = false;
        }
      }
    },
  },
};
</script>